<template>
    <div>
        <van-cell title="地址" icon="location-o" @click="addressShow=true" :value="merchantInfo.address || ''"/>
        <van-cell title="配送时间" icon="clock-o" :value="merchantInfo.sendTime || ''" />
        <van-cell title="门店公告" icon="volume-o" @click="brankShow=true" :value="merchantInfo.notice || ''"/>
        <van-cell title="商家服务" icon="passed" :value="merchantInfo.isBrand == 1 ? '该商户为品牌商户' : '该商户非品牌商户'"/>
        <!-- popup -->
        <van-popup v-model="addressShow" position="bottom">
            <div>
                <h3>地址</h3>
                <p>{{merchantInfo.address || ''}}</p>
            </div>
        </van-popup>
        <van-popup v-model="brankShow" position="bottom">
            <div>
                <h3>公告</h3>
                <p>{{merchantInfo.notice || ''}}</p>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    props: ['merchantInfo'],
    data() {
        return {
            addressShow: false,
            brankShow: false
        }
    }
}
</script>

<style lang="less" scoped>
    .van-cell__value {
        span {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            overflow: hidden; 
            text-overflow: ellipsis;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
        }
    }
    .van-popup {
        padding: 20px 0 35px;
        div {
            margin: 0 auto;
            width: 90%;
            h3 {
                margin: 0;
                font-weight: 400;
                font-size: 16px;
                color: #333;
            }
            p {
                margin-top: 10px;
                font-size: 13px;
                line-height: 16px;
                color: #999;
            }
        }
    }
</style>
